import React, { Component } from 'react';
import { connect } from 'dva';
import { Card, Table, Input, Popconfirm } from 'antd';
import DescriptionList from 'components/DescriptionList';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

const EditableCell = ({ editable, value, column, onChange }) => (
  <div>
    {editable && column !== 'name'
      ? <Input style={{ margin: '-5px 0' }} value={value} onChange={e => onChange(e.target.value)} />
      : value
    }
  </div>
);

@connect(({ contact, loading }) => ({
    contact,
    loading: loading.effects['contact/fetchContactList'],
  }))
export default class FamilyContact extends Component {
    constructor(props) {
      super(props);
      this.state = {
        data:{},
      };
      // this.setState({data : this.props.contact.contacts});
      // console.log('state.data1', this.props.contact.contacts);
      this.columns = 
      [
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
          width: '10%',
          render: (text, record) => this.renderColumns(text, record, 'name'),
        },
        {
          title: '电话号码',
          dataIndex: 'phoneNumber',
          key: 'phoneNumber',
          render: (text, record) => this.renderColumns(text, record, 'phoneNumber'),
        },
        {
          title: '工作单位',
          dataIndex: 'office',
          key: 'office',
          render: (text, record) => this.renderColumns(text, record, 'office'),
        },
        {
          title: '家庭住址',
          dataIndex: 'homeAddress',
          key: 'homeAddress',
          render: (text, record) => this.renderColumns(text, record, 'homeAddress'),
        },
        {
          title: '学历信息',
          dataIndex: 'schoolMsg',
          key: 'schoolMsg',
          render: (text, record) => this.renderColumns(text, record, 'schoolMsg'),
        },
        {
          title: '其他备注',
          dataIndex: 'note',
          key: 'note',
          render: (text, record) => this.renderColumns(text, record, 'note'),
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '6%',
          render: (text, record) => {
            const { editable } = record;
            return (
              <div className="editable-row-operations">
                {
                  editable ?
                    <span>
                      <a onClick={() => this.save(record.id)}>保存</a>
                      <Popconfirm title="确定取消么?" onConfirm={() => this.cancel(record.id)}>
                        <a>取消</a>
                      </Popconfirm>
                    </span>
                    : <a onClick={() => this.edit(record.id)}>编辑</a>
                }
              </div>
            );
          },
        }    
      ];
      this.cacheData = [];
    }

    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({
          type: 'contact/fetchContactList',
          payload: 10001,
        });
        console.log('this.props.contact.contacts', this.props.contact.contacts);
        this.setState({data: this.props.contact.contacts});
        console.log('state.data2', this.state);
    }

    renderColumns(text, record, column) {
      return (
        <EditableCell
          editable={record.editable}
          value={text}
          column={column}
          onChange={value => this.handleChange(value, record.id, column)}
        />
      );
    }
    handleChange(value, key, column) {
      const newData = [...this.props.contact.contacts];
      const target = newData.filter(item => key === item.id)[0];
      if (target) {
        target[column] = value;
        this.setState({ data: newData });
      }
    }
    edit(key) {
      const newData = [...this.props.contact.contacts];
      const target = newData.filter(item => key === item.id)[0];
      if (target) {
        target.editable = true;
        this.setState({ data: newData });
      }
    }
    save(key) {
      const newData = [...this.props.contact.contacts];
      const target = newData.filter(item => key === item.id)[0];
      if (target) {
        delete target.editable;
        this.setState({ data: newData });
        this.cacheData = newData.map(item => ({ ...item }));
        this.props.dispatch({
          type: 'contact/updateContact',
          payload: target,
        });
      }
    }
    cancel(key) {
      const newData = [...this.props.contact.contacts];
      const target = newData.filter(item => key === item.id)[0];
      if (target) {
        Object.assign(target, this.cacheData.filter(item => key === item.id)[0]);
        delete target.editable;
        this.setState({ data: newData });
      }
    }

    render() {
      const { contact, loading } = this.props;
      return (
        <PageHeaderLayout
        >
            <Card bordered={false}>
                <DescriptionList size="large" title="通讯信息" style={{ marginBottom: 32 }}>
                    <Table
                    dataSource={this.props.contact.contacts}
                    columns={this.columns}
                    />  
                </DescriptionList>        
            </Card>
        </PageHeaderLayout>
      );
    }
  }